<template>
    <rx-layout class="os-layout">
        <div slot="left" showButton="true">
            <div class="rx-os-left-content">
                <div class="rx-os-group-list-bar">
                    <div class="rx-os-group-box">
                        <div class="rx-os-dimension">
                            <a-select :value="currentDimId"
                                      style="width: 100%;"
                                      :placeholder="i18n('list.selectDim','请选择维度')"
                                      @change="currentDimIdChange"
                            >
                                <a-select-option :value="item.value" v-for="item of dimAry" @click="handDimChange(item)">{{item.title}}</a-select-option>
                            </a-select>
                        </div>
                        <div class="rx-os-search">
                            <a-input v-model="queryParam.Q_NAME__S_LK" :placeholder="i18n('list.search','搜索')" @change="searchGroup">
                                <template #prefix><a-icon type="search" /></template>
                            </a-input>
                        </div>
                    </div>

                    <div class="rx-os-group-btn">
                        <a-button @click="addGroup" size="small" style="margin-right: 10px;" icon="plus" type="primary">{{$ti18('rxList.newBtn','新建')}}</a-button>
                        <a-button @click="doImport" size="small" icon="import">{{$ti18('rxList.importBtn','导入')}}</a-button>
                    </div>
                </div>
                <div class="rx-os-vue-tree-box">
                    <div class="rx-os-vue-tree-roll" >
                        <rx-vue-tree v-if="dimShowType=='TREE' && !searchFlag"
                                     ref="treeRef"
                                     v-model="selectKey"
                                     field="groupId"
                                     label="name"
                                     :tree-data="groupData"
                                     :showCheckbox="false"
                                     :showEdit="true"
                                     :showIcon="true"
                                     :asyncTree="true"
                                     @rowClick="selectGroup"
                                     @expandClick="handleExpandClick"
                                     :expanded-keys.sync="expandedKeyList"

                        >
                            <div slot="edit" slot-scope="{ tree }">
                                <div class="btn" v-show="canEdit(tree)" @click="editGroup(tree)">
                                    <my-icon type="iconedit"></my-icon>
                                    {{$ti18('rxList.editBtn','编辑')}}
                                </div>
                                <div class="btn" v-show="canEdit(tree) && currentDim && currentDim.showType=='TREE'" @click="editSub(tree)" :title="i18n('list.addSubgroup','新增子组')">
                                    <my-icon type="iconziji"></my-icon>
                                    {{ i18n('list.addSubgroup','新增子组') }}
                                </div>
                                <div class="btn" v-show="canEdit(tree) && currentDim && currentDim.showType=='TREE'" @click="setParent(tree)" :title="i18n('list.parentMigration','父级迁移')">
                                    <my-icon type="iconqianyi"></my-icon>
                                    {{ i18n('list.parentMigration','父级迁移') }}
                                </div>
                                <div class="btn" @click="delByGroupIds(tree.groupId)" v-show="canDel(tree)">
                                    <my-icon type="icontrash"></my-icon>

                                    {{$ti18('rxList.delBtn','删除')}}
                                </div>
                                <div class="btn" v-show="canEdit(tree) && currentDim.isGrant=='YES'" @click.stop="assignMenu(tree)" :title="i18n('list.menuEmpower','菜单授权')">
                                    <my-icon type="iconyanzhengma"></my-icon>

                                    {{ i18n('list.menuEmpower','菜单授权') }}
                                </div>
                                <div class="btn" v-show="canEdit(tree)" @click="setProperty(tree)" :title="i18n('list.xattrs','扩展属性')">
                                    <my-icon type="iconwrench"></my-icon>

                                    {{ i18n('list.xattrs','扩展属性') }}
                                </div>
                            </div>

                        </rx-vue-tree>
                        <rx-grid v-else
                                 ref="table"
                                 :allowRowSelect="true"
                                 :multiSelect="false"
                                 :columns="columns"
                                 :dataSource="groupDatasource"
                                 :dataTotal="totalCount"
                                 :defaultPageSize="20"
                                 :bordered="true"
                                 :showPageJump="false"
                                 :showPageEntry="false"
                                 @selectChange="handGroupSelect"
                                 :pageSizeOptions="['10','20','30','40']"
                                 id-field="groupId"
                                 @onPageConfigChange="onPageChange"
                        >
                            <span slot="name" slot-scope="{ text, record }">
                                {{record.name}}({{record.key}})
                            </span>
                            <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                              <span v-show="canEdit(record)"  @click="editGroup(record)" >
                                  {{$ti18('rxList.editBtn','编辑')}}
                              </span>

                              <span @click="delByGroupIds(record.groupId)" >
                                  {{$ti18('rxList.delBtn','删除')}}
                              </span>
                              <span v-show="canEdit(record) && currentDim.isGrant=='YES'" @click.stop="assignMenu(record)" :title="i18n('list.menuEmpower','菜单授权')">
                                  {{ i18n('list.menuEmpower','菜单授权') }}
                              </span>
                              <span v-show="canEdit(record)" @click="setProperty(record)" :title="i18n('list.xattrs','扩展属性')">
                                  {{ i18n('list.xattrs','扩展属性') }}
                              </span>
                            </span>

                        </rx-grid>
                    </div>
                </div>
            </div>
        </div>

        <div slot="center" >
            <div v-if="!currentGroupId" class="empty-box">
                <a-empty :description="i18n('list.selectGroup','选择组')"/>
            </div>
            <rx-fit class="os-fit" v-else>
                <div class="x-os-center-header">
                    <div class="x-os-center-header-text">
                        <my-icon type="iconjianzhu" style="color: #4d9eff;font-size: 18px;vertical-align: middle;margin-right: 6px;"/>
                        <span style="display: inline-block;vertical-align: middle;">{{currentGroup.name }}</span>
                    </div>
                    <ul>
<!--                        <li><span class="os-text">{{i18n('list.groupId','组ID')}}：</span><span class="os-content">{{currentGroup.groupId}}</span></li>-->
                        <li><span class="os-text">{{i18n('list.groupKey','组KEY')}}：</span><span class="os-content">{{currentGroup.key}}</span></li>
                        <li v-if="currentGroup.rankId"><span class="os-text">{{i18n('list.grade','等级')}}</span><span class="os-content level-content">{{ rankName }}</span></li>
<!--                        <li v-if="currentGroup.type"><span class="os-text">{{i18n('list.groupType','组织类型')}}：</span><span class="os-content type-content">{{ currentGroup.type==1?"单位":"部门" }}</span></li>-->
                    </ul>
                </div>

                <div v-if="isCompany">
                    <os-group-auth :group-id="currentGroupId" ></os-group-auth>
                </div>
                <a-tabs defaultActiveKey="user" class="os-a-tabs" @change="mainChange" v-if="!isCompany" :type="'card'">
                    <a-tab-pane :tab="i18n('isTab.userRelations','用户关系')" key="user">
                        <div class="os-middle-container">
                            <div class="os-middle-btn-box">
                                <a-button @click="addUser()" type="primary" size="small" >
                                    <my-icon type="iconjia"/>
                                    {{$ti18('rxList.addBtn','新建')}}
                                </a-button>
                                <a-button v-show="removeEnable" type="danger" size="small" @click="delByUserId()">
                                    <my-icon type="iconVue3_delete"/>
                                    {{$ti18('rxList.removeBtn','移除')}}
                                </a-button>
                                <a-button @click="joinUser()" type="primary" size="small" >
                                    <my-icon type="iconjia"/>
                                    {{ i18n('isButton.join','加入') }}
                                </a-button>
                                <!-- <a-button @click="userSearch()" >查询</a-button> -->
                            </div>
                            <div class="os-middle-search-box">
                                <a-input size="small"
                                         :placeholder="i18n('form.name','姓名','input')"
                                         allowClear
                                         v-model="fullname" @pressEnter="userSearch" @change="userSearch" style="width:160px"
                                />
                                <a-input size="small"
                                         :placeholder="i18n('form.userID','请输入用户账号')"
                                         allowClear
                                         v-model="userNo" @pressEnter="userSearch" @change="userSearch" style="width:160px;margin: 0 10px"
                                />
                                <a-button  @click="userSearch" size="small" type="primary">
                                    {{$ti18('rxList.searchBtn','查询')}}
                                </a-button>

                            </div>
                        </div>
                        <a-tabs v-model="userActiveKey" @change="userChange" class="atbliat" :tabBarGutter="0">
                            <a-tab-pane v-for="pane in userPanes"
                                        :tab="pane.title" :key="pane.key"
                                        :closable="pane.closable"
                                        forceRender>
                                <div style="width: calc( 100% - 2px );height: 100%;">
                                    <user-list-component
                                        style="margin-left: 1px"
                                        :rel-type-id="pane.relTypeId"
                                        :group-id="currentGroupId"
                                        :tenant-id="tenantId"
                                        :ref="pane.key"
                                        :dim-id="currentDim.value"
                                    />
                                </div>
                            </a-tab-pane>
                        </a-tabs>
                    </a-tab-pane>
                    <a-tab-pane :tab="i18n('isTab.groupRelation','组关系')" key="group" forceRender v-show="groupActiveKey" v-if="groupPanes.length>0">

                        <div class="os-middle-container">
                            <div>
                                <a-button @click="addGroupRelInst()" icon="plus" type="primary" size="small" style="margin-right: 10px;">
                                    {{i18n('isButton.newlyIncreased','新增')}}
                                </a-button>
                                <a-dropdown v-show="removeEnable">
                                    <a-button type="danger" icon="delete" @click="removeGroupRelType()" size="small">
                                        {{$ti18('rxList.removeBtn','移除')}}
                                    </a-button>
                                </a-dropdown>
                            </div>

                            <div style="display: flex;">
                                <a-input size="small"
                                         style="width: 160px;margin-right: 10px"
                                         allowClear
                                         :placeholder="i18n('isSearchBox.groupRelationName','组关系名称','input')"
                                         v-model="orgRelName" @pressEnter="orgSearch"/>

                                <a-button @click="orgSearch" size="small" type="primary">
                                    {{$ti18('rxList.searchBtn','查询')}}
                                </a-button>
                            </div>
                        </div>
                        <a-tabs v-model="groupActiveKey" @change="groupChange" class="atbliat atbliat2" :tabBarGutter="0">
                            <a-tab-pane v-for="pane in groupPanes" :tab="pane.title" :key="pane.key"
                                        :closable="pane.closable"
                                        forceRender>
                                <group-list-component
                                    :rel-type-id="pane.relTypeId"
                                    :rel-type="pane.relType"
                                    :dim-id2="pane.dimId2"
                                    :group-id="currentGroupId"
                                    :rel-type-key="pane.key"
                                    :tenant-id="tenantId"
                                    :ref="pane.key"
                                    :url="urlRel"/>
                            </a-tab-pane>
                        </a-tabs>
                    </a-tab-pane>
                </a-tabs>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import OsGroupEdit from "./OsGroupEdit.vue"
import OsGroupImport from "./OsGroupImport.vue"
import UserListComponent from './UserListComponent.vue'
import GroupListComponent from './GroupListComponent.vue'
import GroupProperties from './GroupProperties.vue'
import osPropertiesGroupApi from '@/api/user/org/osPropertiesGroup'
import OsGroupExt from '@/api/user/org/osGroupExt'
import OsGroupApi from '@/api/user/org/osGroup'
import {BaseList, RxLayout, RxGrid, RxFit, Util, Dialog,RxVueTree} from "@lowcode/jpaas-common-lib"
import userState from "@/assets/js/userState";
import OsGroupAuth from "@/views/modules/user/org/OsGroupAuth";


export default {
    name: 'TableList',
    mixins: [BaseList, OsGroupExt, userState],
    components: {
        OsGroupAuth,
        OsGroupEdit,
        OsGroupImport,
        UserListComponent,
        GroupListComponent,
        RxLayout,
        RxFit,
        RxGrid,
        GroupProperties,
        RxVueTree
    },
    data() {
        return {
            orgRelName:"",
            urlRel:"/api-user/user/org/osRelInst/getGroupListByGroupIdAndRelType",
            // 表头
            columns: [
                {
                    title: this.i18n('form.groupName','组名'),
                    width: 150,
                    dataIndex: 'name',
                    ellipsis: true,
                    scopedSlots: {customRender: 'name'}
                },
                {
                    title: this.$ti18('rxList.action','操作') ,
                    width: 120,
                    dataIndex: 'action',
                    scopedSlots: {customRender: 'action'}
                },

            ],


            component: OsGroupEdit,
            comment: this.i18n('list.comment','用户组') ,
            widthHeight: ['800px', '500px'],
            tableData: [],
            //是否公司
            isCompany: false,
            treeKey:'x'
        }
    },

    methods: {
        currentDimIdChange(v){
            this.queryParam.Q_NAME__S_LK = '';
            this.searchFlag = false;
            if(!v){
                this.currentDimId = '1';
                let item = this.dimAry.find(item=>item.value === '1')
                this.handDimChange(item)
                this.$forceUpdate()
            }
            this.fullname = '';
            this.userNo = ''
        },
        async handleExpandClick(trigger,tree,parentData){
            if(tree.children && tree.children.length > 0){
                return ;
            }
            let res = await OsGroupApi.queryGroups(this.queryParam.Q_DIM_ID__S_EQ, tree.groupId, "no", this.tenantId)
            if(res.success){
                tree.children = res.data.map(item=>{
                    return item.childAmount && item.childAmount > 0?{...item,children:[]} : {...item} ;
                })
            }
            tree.loading = false;
        },


        i18n(name,text,key){
            return this.$ti18(name,text,"osGroup",key);
        },
        //组关系查询
        orgSearch(){
            const orgRelName = this.orgRelName;
            this.$refs[this.groupActiveKey][0].orgSearch(orgRelName);
        },
        getCheckboxProps(record){
            var canEdit=record.isPublic;
            return {
                props: {
                    disabled: canEdit
                }
            }
        },
        handleTypeColumn(dimId) {

            this.removeField("type");
            this.removeField("isPublic");
            //行政组织，增加一列组织类型
            if (dimId == "1") {
                this.columns.push({title: this.i18n('form.organizationType','组织类型') ,dataIndex: 'type',width: 100,scopedSlots: {customRender: 'type'}});
            } else {
                this.columns.push({title: this.i18n('form.public','公共'),dataIndex: 'isPublic',width: 100,scopedSlots: {customRender: 'isPublic'}});
            }
        },

        removeField(field){
            for(let i=0;i<this.columns.length;i++){
                let col=this.columns[i];
                if(col.dataIndex==field){
                    this.columns.splice(i,1);
                }
            }
        },


        setParent(record) {
            var params = {
                isGrade: false,
                single: true,
                dimId: record.dimId,
                showDimId: false,
                groupId: record.groupId,
                isExcludeThis: true
            };
            if (this.tenantId) {
                params.tenantId = this.tenantId;
            }
            Dialog.openGroupDialog(
                {
                    curVm: this, data: params,
                    widthHeight: ['1000px', '600px']
                }, function (self, data) {
                    if (data && data.groupId) {
                        if (data.groupId == record.parentId) {
                            self.$message.error(self.i18n('form.isMessageError','不能选择同一个父级！'));
                            return;
                        }
                        self.changeParent(record.groupId, data.groupId);
                    }
                })
        },
        changeParent(groupId, parentId) {
            var self_ = this;
            OsGroupApi.changeParent(groupId, parentId).then(result => {
                self_.initGroups();
            })
        },

        delById(ids) {
            return OsGroupApi.delOsGroup({ids: ids.join(',')});
        },

        addGroup() {
            if (!this.currentDimId) {
                this.$message.error(this.i18n('form.dimension','维度！','select'));
                return;
            }
            var params = {supportGrade: this.supportGrade, dimId: this.currentDimId};
            if (this.tenantId) {
                params.tenantId = this.tenantId;
            }

            var conf = {
                component: this.component,
                title: this.$ti18('rxList.newBtn','添加') + this.comment,
                widthHeight: this.widthHeight,
                data: params
            };
            this.handleGroupEdit(conf);
        },
        delByGroupIds(groupId) {

            let self_ = this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                content: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                okText: this.$ti18('rxForm.okBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    OsGroupApi.removeById({groupId: groupId}).then(res => {
                        if (res.success && res.code == 200) {
                            self_.delByGroupId(self_.groupData,groupId);
                        }
                    })
                },
                onCancel() {
                }
            })
        },
        delByGroupId(tableData,groupId){
            for (var i = 0; i < tableData.length; i++) {
                var data=tableData[i];
                if (data.groupId == groupId) {
                    tableData.splice(i,1);
                    return data;
                    break;
                } else {
                    if (data.childAmount > 0 || (data.children && data.children.length>0)) {
                        var delData=this.delByGroupId(data.children, groupId);
                        if(delData && data.children.length==0){
                            delete data.children;
                            var expandedRowKeys=this.$refs.treeRef.expandedRowKeys;
                            if(expandedRowKeys && expandedRowKeys.length>0){
                                for (let j = 0; j < expandedRowKeys.length; j++) {
                                    if(expandedRowKeys[j]==delData.parentId){
                                        this.$refs.treeRef.expandedRowKeys.splice(j,1);
                                        break;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        },
        editGroup(record) {
            var conf = {
                component: this.component,
                title: this.$ti18('rxList.editBtn','编辑') + this.comment,
                widthHeight: this.widthHeight,
                data: {pkId: record.pkId, supportGrade: this.supportGrade, dimId: this.currentDimId}
            };
            this.handleGroupEdit(conf,record);
        },
        editSub(record) {
            var params = {parentId: record.groupId, dimId: record.dimId,supportGrade: this.supportGrade};
            if (this.tenantId) {
                params.tenantId = this.tenantId;
            }
            var conf = {
                component: this.component,
                title: this.i18n('form.addTheSubOf','添加子')  + this.comment,
                widthHeight: this.widthHeight,
                data: params
            };
            this.handleGroupEdit(conf,record,'sub');
        },

        handleGroupEdit(conf,record,type) {
            let self_ = this;
            let baseConf = {
                "curVm": self_
            }
            let config = Object.assign(baseConf, conf);
            config.data.updateData=this.updateData;
            config.data.tableData=this.tableData;
            Util.open(config, function (action,tableData) {
                if(action!='ok'){ return }
                if(record){
                    if(type === 'sub'){
                        if(record.children){
                            record.children.push(tableData)
                        }else{
                            record['children'] = [tableData];
                        }
                        self_.groupData = [...self_.groupData];
                    }else {
                        Object.assign(record,tableData);
                    }
                }else {
                    self_.groupData.push(tableData)
                }
            })
        },
        setProperty(record) {
            var self = this;
            var config = {
                "curVm": self,
                "data": {"dimId": record.dimId, "groupId": record.groupId},
                component: GroupProperties,
                title: this.i18n('form.xattrsManage','扩展属性管理'),
                widthHeight: ['1024px', '600px'],
            };
            Util.open(config, function (action, propertiesGroups) {
                if (action != 'ok') return;
                if (propertiesGroups.length > 0) {
                    var parameter = {
                        propertiesGroups: JSON.stringify(propertiesGroups),
                        groupId: record.groupId
                    }
                    osPropertiesGroupApi.saveProperties(parameter).then(res => {
                    });
                }
            });
        },


        //更新数据到tableData中 upd为true则表示是放入一个数据
        updateData(tableData, data, groupId,upd) {
            //第一级
            if(groupId=="0") {
                tableData.push(data);
                return;
            }
            for (var i = 0; i < tableData.length; i++) {
                if (tableData[i].groupId == groupId) {
                    if(upd){
                        if(tableData[i].children && tableData[i].children.length>0 ){
                            tableData[i].children.push(data);
                        }else if( !tableData[i].children || (tableData[i].children.length==0 && tableData[i].childAmount == 0 )){
                            tableData[i].children=[];
                            tableData[i].childAmount++;
                        }
                    }else {
                        tableData[i].children = data;
                    }
                    break;
                } else {
                    if (tableData[i].childAmount > 0) {
                        this.updateData(tableData[i].children, data, groupId,upd);
                    }
                }
            }
        },
        doImport() {
            var self = this;
            Util.open(
                {
                    component: OsGroupImport,
                    curVm: this,
                    widthHeight: ['530px', '320px'],
                    title: this.i18n('form.importUserGroups','导入用户组'),
                    data: {
                        callback: function (message) {
                            let delayTime = 5;
                            if (message.indexOf('】' + self.i18n('form.record','】条记录！'))) {
                                delayTime = 12;
                            }
                            self.$notification.open({
                                message: this.i18n('form.importComplete','导入完成'),
                                description: message,
                                duration: delayTime,
                            });
                            //self.getGroups(); //刷新数据
                        }
                    }
                }, function (action) {
                });
        },

    }
}
</script>
<style scoped>
.rx-os-group-box> .rx-os-dimension,
.rx-os-group-box> .rx-os-search
{
    flex: 1;
    position: relative;
    z-index: 0;
}
.rx-os-group-box> .rx-os-dimension:hover,
.rx-os-group-box> .rx-os-search:hover{
    z-index: 2;
}
.rx-os-group-box> .rx-os-dimension >>> .ant-select-selection--single{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.rx-os-group-box> .rx-os-search >>> .ant-input{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}
.rx-os-group-box{
    display: flex;
}
.rx-os-group-btn{
    padding: 10px 0;
}
.rx-os-left-content{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.rx-os-vue-tree-box{
    flex: 1;
    position: relative;
    padding: 0 10px;
}
.rx-os-vue-tree-roll{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    padding-left: 10px;
}
.x-os-center-header-text{
    font-weight: bold;
    height: 22px;
}
.x-os-center-header ul{
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.x-os-center-header >ul >li{
    margin-right: 28px;
}
.x-os-center-header span.os-content{
    line-height: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-block;
}
.x-os-center-header-text{
    padding-right: 20px;
}
.x-os-center-header{
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #E8E8E8;
}
.empty-box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.type-content{
    padding: 0 6px;
    color: #52c41a;
    background-color: rgba(82, 196, 26, 0.1);
}
.level-content{
    padding: 0 6px;
    color: #1890ff;
    background-color: rgba(24, 144, 255, 0.1);
}
.os-middle-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ecf3fe;
    padding: 10px;
    border-radius: 4px;
    min-height: 45px;
}

.os-middle-btn-box >>> .ant-btn{
    margin-right: 10px;
}
.os-layout >>> .rx-left{
    max-width: 400px;
    min-width: 230px;
    width: 30%;
}


.os-a-tabs >>> >.ant-tabs-top-bar >.ant-tabs-nav-container  .ant-tabs-ink-bar{
    display: none!important;
}

.os-fit{
    padding: 0;
}
.os-a-tabs{
    height: calc( 100% - 45px );
    padding:10px 10px 0;
    overflow: hidden;
}

.atbliat >>> .ant-tabs-bar{
    margin-bottom: 0;
    padding:0;
}

.atbliat {
    height:calc( 100% - 80px );
}
.atbliat >>> .ant-tabs .ant-tabs-top-content{
    height:calc( 100% - 85px );
}
.atbliat.atbliat2{
    height:calc( 100% - 90px );
}
.on-select{
    padding-bottom: 10px;
}
.os-fit >>> .divdefault{
    overflow: hidden
}

.rx-os-group-list-bar{
    padding: 10px 10px 0;
    border: 1px solid #e8e8e8;
}
.os-text{
    display: inline-block;
    margin-right: 6px;
}
.os-layout >>> .ant-tabs-bar{
    margin-bottom: 10px;
}

.os-layout >>> .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab,
.os-layout >>> .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container,
.os-layout >>> .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
    height: 32px;
    line-height: 30px;
}
</style>